
<template>
  <div>
    <!-- <MyAlert 
      type="warning" 
      message=""
    /> -->
    <!-- // <div v-loading="loading" >
//   <div class="user-permission-header">
//     <a-button type="primary" size="small" preIcon="ant-design:plus-outlined" :loading="loading" style="margin-right: 0.6rem">授权</a-button>
//     <a-button type="primary" size="small" :loading="loading" ghost>查看拥有的菜单</a-button>
//   </div> -->
    <BasicTable @register="registerTable" >
      <template #tableTitle>
        <a-input 
          allowClear v-model:value="searchForm.keyword" 
          style="width: 300px; margin-right: 1rem" placeholder="策略名称"
          @pressEnter="handleSearch"
        />
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAssignPermPolicy"> 授权</a-button>
        <a-button type="primary" @click="handleOpenUserMenuDetail"> 查看拥有的菜单</a-button>
      </template>

      <!-- <template #firstColumn="{ record }">
        <span class="cursor-pointer" @click="expandCollapse(record)">
          {{ record.areaName }}
        </span>
      </template> -->
    </BasicTable>
    <EditApiForm @register="registerFormApi" @success="handleSuccess" />
    <EditMenuForm @register="registerEditMenuForm" @success="handleSuccess" />
    <Detail @register="registerFormDetail"/>
    <AddForm @register="registerAddForm" @success="handleSuccess" />
    <SubjectAuthorize  @register="registerSubjectAuthorize" @success="reload"/>

    <UserMenu @register="registerUserMenuDetail"/>
  </div>
</template>
<script lang="ts" name="RamPermissionPolicy" setup>
import { ref, nextTick, watch} from 'vue';
import { Auth } from '/@/enums/authEnum'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import * as permPolicyApi from '/@/api/iam/permPolicy';
import { useMessage } from '/@/hooks/web/useMessage';
import { useModal } from "/@/components/Modal"
import { NamespaceCodeEnum, PermPolicyResourceType, SubjectType } from '/@/enums/iamEnum';
import { SubjectAuthorize } from "/@/components/My/SubjectAuthorize/index"
import UserMenu from './UserMenu.vue'
import { useEventBus } from '/@/hooks/event/useEventBus'
import { 
  EditApiForm, AddForm, EditMenuForm , Detail,
  subjectPermPolicyColumns
} from '/@/views/iam/permPolicy/index'
import { Icon } from '/@/components/Icon';

const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const showPolicyType = ref(false)
const { isDisabledAuth } = usePermission()
const [registerAddForm, { openModal: openAddForm }] = useModal()
const [registerFormApi, { openDrawer: openFormApi }] = useDrawer();
const [registerEditMenuForm, { openDrawer: openEditMenuForm }] = useDrawer();
const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()
const [registerSubjectAuthorize, { openDrawer: openSubjectAuthorize }] = useDrawer()
const [registerUserMenuDetail, { openDrawer: openUserMenuDetail }] = useDrawer()

const props = defineProps({
  data: { type: Object },
  apiNamespaceCode: { type: String, default: NamespaceCodeEnum.APP_GOVERN_HUB },
})

const searchForm = ref({
  keyword: null
})

const actionColumn: BasicColumn = {
  width: 130,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '取消授权',
      color: 'error',
      ifShow: record.canWrite,
      disabled: record.subjectType == SubjectType.ROLE,
      auth: Auth.deleteRamPermissionPolicy,
      popConfirm: {
        title: '是否确认取消授权',
        confirm: handleDelete.bind(null, record),
      },
    },
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '',
  api: async (params) => {
    params.keyword = searchForm.value?.keyword
    params.userId = props.data?.userId
    const data = await permPolicyApi.listUserPermPolicy(params)
    return data;
  },
  columns: subjectPermPolicyColumns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  showTableSetting: false,
  useSearchForm: false,
  pagination: true,
  immediate: false,
  canResize: true,
  rowKey: 'id',
  actionColumn,
})

watch(
  () => props.data,
  (data) => {
    nextTick(() => {
      data.userId && reload()
    })
    
  }, 
  { immediate: true }
)
const handleSearch = () => reload()


const handleOpenUserMenuDetail = () => {
  openUserMenuDetail(true, { userId: props.data?.userId })
}

function handleAssignPermPolicy() {
  openSubjectAuthorize(true, { 
    subjectId: props.data?.userId,
    subjectType: SubjectType.USER,
    subjectName: props.data?.userName,
    config: {
      assignSubjectPermPolicyApi: permPolicyApi.assignPermPolicyToUser,
    }
  })
}


useEventBus({ topic: "quickOpen"}, (policy) => {
  if (policy.resourceType == PermPolicyResourceType.MENU) {
    openEditMenuForm(true, { record: policy, apiNamespaceCode: props.apiNamespaceCode });
  } else {
    openFormApi(true, { record: policy, apiNamespaceCode: props.apiNamespaceCode });
  }
})

const handleDelete = async (record) => await permPolicyApi.deleteUserPermPolicy({ ids: [ record.id ] }, reload)
const handleDetail = (record) => openFormDetail(true, { record })
const handleSuccess = () => reload()

</script>
